<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Message from "./Message.svelte";
    import { fn } from "storybook/test";
    import { Button } from "../Button";
    import { message } from ".";
    import { createUniqueId } from "../utils/createUniqueId";
    import Icon from "@iconify/svelte";

    const { Story } = defineMeta({
        title: "Components/Views/Message",
        component: Message,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Button
            onclick={() => {
                message.info("这是一条消息");
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="Stack">
    {#snippet template(args)}
        <Button
            onclick={() => {
                message.info({
                    content: "这是一条消息",
                    stack: true,
                });
            }}>消息</Button
        >
    {/snippet}
</Story>

<Story name="Types">
    {#snippet template(args)}
        <Button
            onclick={() => {
                message.info("这是一条消息");
            }}>消息</Button
        >
        <Button
            type="success"
            onclick={() => {
                message.success("这是一条成功消息");
            }}>成功</Button
        >

        <Button
            type="warning"
            onclick={() => {
                message.warning("这是一条告警消息");
            }}>告警</Button
        >

        <Button
            type="danger"
            onclick={() => {
                message.error("这是一条错误消息");
            }}>错误</Button
        >
    {/snippet}
</Story>

<Story name="Background" args={{ background: true }}>
    {#snippet template(args)}
        <Button
            onclick={() => {
                message.info({
                    content: "这是一条消息",
                    ...args,
                });
            }}>消息</Button
        >
        <Button
            type="success"
            onclick={() => {
                message.success({
                    content: "这是一条成功消息",
                    ...args,
                });
            }}>成功</Button
        >

        <Button
            type="warning"
            onclick={() => {
                message.warning({
                    content: "这是一条告警消息",
                    ...args,
                });
            }}>告警</Button
        >

        <Button
            type="danger"
            onclick={() => {
                message.error({
                    content: "这是一条错误消息",
                    ...args,
                });
            }}>错误</Button
        >
    {/snippet}
</Story>

<Story name="Closeable" args={{ closeable: true }}>
    {#snippet template(args)}
        <Button
            type="primary"
            onclick={() => {
                message.error({
                    content: "这是一条消息",
                    duration: 0,
                    ...args,
                });
            }}>信息</Button
        >
    {/snippet}
</Story>

<Story name="Loading" args={{ loading: true }}>
    {#snippet template(args)}
        <Button
            type="primary"
            onclick={() => {
                const key = createUniqueId();
                message.error({
                    key: key,
                    content: "Loaidng...",
                    duration: 0,
                    ...args,
                });

                setTimeout(() => {
                    message.close(key);
                }, 2000);
            }}>加载</Button
        >
    {/snippet}
</Story>

<Story name="Icon">
    {#snippet template(args)}
        {#snippet icon()}
            <Icon icon="f7:checkmark-seal-fill" />
        {/snippet}
        <Button
            type="primary"
            onclick={() => {
                message.info({
                    content: "这是一条信息",
                    icon: icon,
                    stack: true,
                });
            }}>信息</Button
        >
    {/snippet}
</Story>
